<template>
  <div class="list-container">
    <!-- 遍历 items 数组，生成列表项 -->
    <div v-for="item in items" :key="item.id" class="list-item">
      <!-- 列表项内容 -->
      <div
        class="item-content"
        @touchstart="startTouch"
        @touchend="endTouch"
        @click="navigateToDetail(item.id)"
      >
        <!-- 盒子 -->
        <div class="item-inner">
          <!-- 左侧图片 -->
          <div class="item-img">
            <img
              src="https://img.zcool.cn/community/01445d5ec24aeea801214814886d5e.jpg@1280w_1l_2o_100sh.jpg"
              alt=""
            />
          </div>
          <!-- 右侧内容 -->
          <div class="item-right">
            <!-- 年份 -->
            <div class="item-year">{{ item.year }}</div>
            <!-- 名称和文本 -->
            <div class="item-details">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-text">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 结束问诊 -->
      <div class="delete-btn" @click="deleteItem(item.id)">结束问诊</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
// 使用 ref 创建响应式的 items 数组，初始化时包含三个项目
const items = ref([
  {
    id: 1,
    name: "武帅江",
    img: "https://img.zcool.cn/community/01445d5ec24aeea801214814886d5e.jpg@1280w_1l_2o_100sh.jpg",
    text: "左眼皮一直跳怎么回事？",
    year: "2024/8/16",
  },
  {
    id: 2,
    name: "王晓磊",
    img: "../../imgs/tx.jpg",
    text: "感谢您的解答，我会按时服药",
    year: "2024/8/16",
  },
  {
    id: 3,
    name: "孟宪峰",
    img: "../../imgs/tx.jpg",
    text: "昨天下雪了,懂的我感冒了",
    year: "2024/8/16",
  },
]);

const navigateToDetail = (id) => {
  router.push({ name: "Recording", params: { id } });
};
const activeItem = ref(null); // 当前活跃的列表项
const swipeThreshold = 30; // 滑动阈值

// 处理触摸开始事件
function startTouch(e) {
  const touchStartX = e.changedTouches[0].clientX; // 记录触摸开始时的 X 坐标
  

  // 监听 touchmove 事件以检测滑动
  e.currentTarget.addEventListener("touchmove", function startTouch(e) {
    const touchMoveX = e.changedTouches[0].clientX; // 记录滑动时的 X 坐标
    const item = e.currentTarget.parentElement; // 获取当前项的父元素
    const distance = touchMoveX - touchStartX; // 计算滑动距离

    // 如果滑动距离小于负阈值，表示左滑
    if (distance < -swipeThreshold) {
      item.classList.add("active"); // 添加 active 类
      activeItem.value = item; // 更新当前活跃项
    } else if (distance > swipeThreshold) {
      item.classList.remove("active"); // 移除 active 类
    }
  });

  // 监听 touchend 事件以处理滑动结束
  e.currentTarget.addEventListener("touchend", function endHandler(e) {
    const item = e.currentTarget.parentElement; // 获取当前项的父元素
    const touchEndX = e.changedTouches[0].clientX; // 记录触摸结束时的 X 坐标
    const distance = touchEndX - touchStartX; // 计算滑动距离

    // 如果滑动距离大于阈值，表示右滑，移除 active 类
    if (distance > swipeThreshold) {
      item.classList.remove("active");
    }
    // 否则，如果是左滑，保持 active 类

    // 移除事件监听器
    e.currentTarget.removeEventListener("touchmove", startTouch);
    e.currentTarget.removeEventListener("touchend", endHandler);
  });
}

// 结束问诊指定id的项
function deleteItem(id) {
  items.value = items.value.filter((item) => item.id !== id);
}
</script>
<style scoped>
.list-container{
  width: 100%;
  height: 605px;
  overflow: auto;
}
.list-container::-webkit-scrollbar {
  display: none; /* 对于 Webkit 浏览器（如 Chrome 和 Safari）隐藏滚动条 */
}

.list-item {
  position: relative; /* 相对定位以便可以定位子元素 */
  width: 100%; /* 100% 宽度 */
  background: #f9f9f9; /* 背景色 */
  border: 1px solid #ddd; /* 边框 */
  overflow: hidden; /* 防止内容溢出 */
  margin-bottom: 10px; /* 底部边距 */
}

.item-content {
  display: flex; /* 使用 flexbox 布局 */
  padding: 15px; /* 内边距 */
  transition: transform 0.3s ease; /* 平滑过渡 */
  height: 100px;
}

.item-inner {
  display: flex; /* 使用 flexbox 布局 */
  width: 100%;
}

.item-img {
  flex: 0 0 20%; /* 固定宽度为 20% */
  height: 100%; /* 自动高度 */
  margin-right: 15px; /* 右边距 */
}

.item-img img {
  width: 100%; /* 100% 宽度 */
  height: 100%; /* 自动高度 */
}

.item-right {
  flex: 1; /* 占据剩余的宽度 */
  line-height: 25px;
}

.item-year {
  font-size: 12px; /* 年份字体大小 */
  color: #888; /* 年份颜色 */
  margin-bottom: 10px; /* 底部边距 */
  margin-left: 80%;
}

.item-details {
  display: flex;
  flex-direction: column; /* 垂直排列 */
}

.item-name {
  font-size: 16px; /* 名称字体大小 */
  font-weight: bold; /* 名称加粗 */
  margin-bottom: 5px; /* 底部边距 */
}

.item-text {
  font-size: 14px; /* 文本字体大小 */
  color: #555; /* 文本颜色 */
}

.delete-btn {
  position: absolute; /* 绝对定位 */
  right: -100px; /* 初始隐藏在右侧 */
  top: 0; /* 与容器顶部对齐 */
  height: 100%; /* 高度为 100% */
  width: 100px; /* 宽度为 100px */
  background: #ff4d4f; /* 背景色 */
  color: white; /* 文字颜色 */
  text-align: center; /* 文字居中 */
  line-height: 130px; /* 行高 */
  cursor: pointer; /* 光标样式为手形 */
  transition: right 0.3s ease; /* 平滑过渡 */
}

.list-item.active .delete-btn {
  right: 0; /* 当列表项激活时，删除按钮滑入可见区域 */
}
</style>
